import { reactive, DefineComponent, watch, markRaw } from "vue";
import { designComponent } from 'src/use/designComponent';
import { AppNavigator } from './app-navigator';
export const AppNavigatorPage = designComponent({
    setup({ props, event, setupContext}) {
        const navigator = AppNavigator.use.inject()

        const state = reactive({  // 响应式属性
            PageComponent: null as null | DefineComponent
        })

        const utils = {
            reset: async () => {
                const route = navigator.state.route
                if (!route) {
                    return
                }
                let {path} = route
                if (!path) {
                    return
                }
                if (path.charAt(0) === '/') {
                    path = path.slice(1)
                }
                console.log('path', 'story/pages/' + path)
                // const Component = (await import('story/pages/' + path)).default
                // state.PageComponent = markRaw(Component) //markRaw变成非响应式属性
                const Component = (await import('story/pages/' + path)).default
                state.PageComponent = markRaw(Component)

            }
        }

        watch(() => navigator.state.route.path, utils.reset, { immediate: true })
        
        return {
            render: () => {
                const { PageComponent } = state
                return !!PageComponent ? <PageComponent /> : null
            }
        }
    }
})